<template>
  <div class="my-header" v-scroll-fixed>
    <el-input
      @keyup.enter="add"
      class="input"
      placeholder="添加todo"
      v-model="value"
      :prefix-icon="CirclePlusFilled"
    />
  </div>
</template>

<script setup>
import { CirclePlusFilled } from "@element-plus/icons-vue";
import useHeaderScrollHook from "./Hooks/useHeaderScrollHook";
const vScrollFixed = useHeaderScrollHook();
const $props = defineProps({
  list: {
    type: Array,
    required: true,
  },
});
const $emits = defineEmits(["addValue",'busClearValue']);
const value = ref("");
const clearValue = () => {
  value.value = "";
};
$emits('busClearValue',clearValue)
const add = () => {
  if (value.value === "") {
    ElMessage("内容为空");
  } else {
    const has = $props.list.some((item) => item.value === value.value);
    if (has) {
      ElMessage("内容重复");
    } else {
      $emits("addValue", value.value);
    }
  }
};
</script>

<style lang="scss" scoped>
.my-header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 30%;
  background-color: #6528e0;
  &.scroll {
    @keyframes scroll {
      0% {
        position: fixed;
        top: -100%;
      }
      100% {
        position: fixed;
        top: 0px;
      }
    }
    animation: scroll 0.5s;
  }
  .input {
    width: 300px;
  }
}
</style>
